<template>
  <div>
    <el-dialog title="新增库位" :visible.sync="addDepartvis" @close="close" width="500px" append-to-body>
        <el-form :rules="rules" :model="addDepartForm" ref="addDepart">

            <el-form-item prop="number" label="库位编号" :label-width="formLabelWidth">
                <el-input v-model="addDepartForm.number"></el-input>
            </el-form-item>
            <el-form-item label="所属仓库:" :label-width="formLabelWidth">
                {{main_store}}
            </el-form-item>
            <el-form-item prop="area_id" label="所属库区" :label-width="formLabelWidth">
                <el-select v-model="addDepartForm.area_id" placeholder="请选择所属库区">
                  <el-option v-for="item in areaList" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="addDepartForm.remark"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="danger" :loading="submitLoading" @click="successAdd('addDepart')">确 定</el-button>
        </div>
          </el-dialog>
        </div>
</template>

<script>
import { AddDepart } from '@/api/store.js';

export default {
  name: 'addstore',
  props: ['addDepartDialog','areaList', 'area_id'],
  data() {
    return {
      addDepartvis: false,
      submitLoading: false,
      addDepartForm: {
        number: '',
        area_id: '',
        remark: '',
      },
      formLabelWidth: '110px',
      rules: {
          number: [
            { required: true, message: '请输入库位编号', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入库位名称', trigger: 'blur' },
          ],
          area_id: [
            { required: true, message: '请选择所属库区', trigger: 'change' },
          ],
      }
    }
  },
  computed: {
    main_store() {
      return this.$store.state.store.main_store;
    },
    store_id() {
      return this.$store.state.store.store_id;
    }
  },
  methods: {
    close() {
      this.addDepartvis = false;
      this.resetForm();
      this.$emit("update:addDepartDialog", false);
    },
    resetForm() {
      this.addDepartForm.number = '';
      // this.addDepartForm.area_id = '';
      this.addDepartForm.remark = '';
    },
    successAdd(formName) {
     
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let reqData = {
              departmentCode: this.addDepartForm.number,
              areaId: this.addDepartForm.area_id,
              departmentRemark: this.addDepartForm.remark
          }
          AddDepart(reqData).then( res => {
            let data = res.data
            this.$message({
                message: data.msg,
                type: 'success'
            })
            this.submitLoading = false;
            this.$refs.addDepart.resetFields();
            this.resetForm();
            this.addDepartvis = false;
            this.$emit("update:addDepartDialog", false);
          }).catch(error => {
              this.submitLoading = false;
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      
      
      //this.submitLoading = true;
      // AddStore(reqData).then(response => {
      //     let data = response.data
      //     this.$message({
      //         message: data.msg,
      //         type: 'success'
      //     })
      //     this.submitLoading = false;
      //     this.$refs.addDepart.resetFields();
      //     this.resetForm();
      // }).catch(error => {
      //     this.submitLoading = false;
      // })
    }
  },
  watch: {
    addDepartDialog(newVal,oldVal) {  
      this.addDepartvis = newVal;
    },
    area_id(newVal) {
      if (newVal) {
        this.addDepartForm.area_id = newVal;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  
</style>